<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaDoc</title>


    <link href="static/css/index.css" rel="stylesheet">

    <link href="static/css/list-group.css" rel="stylesheet">
</head>
<body>


<div class="menu">
    <div id="tree"></div>
</div>
<article>
    <ul id="apiContent">

    </ul>
</article>

<script id="paramsTemplate" type="text/html">
    {{if paramList && paramList.length > 0}}
    <h2>{{name}}</h2>
    <table class="typeTable">
        <tr>
            <th>参数名</th>
            <th>类型</th>
            <th>描述</th>
            <th>限制</th>
        </tr>
        {{each paramList item j}}
        <tr data-depth="{{item.depth}}">
            <td class="name" style="{{'padding-left:'+(item.depth * 12 + 10)+'px;'}}">
                {{if item.depth > 0}}
                <div class="depth" style="{{'width:' + (item.depth * 12) + 'px;'}}"></div>
                {{/if}}
                {{item.name}}
            </td>
            <td class="classType" title="{{item.classInfo}}">{{item.type}}
                <i></i>
            </td>
            <td>{{@ CommentUtil.parse(item.comment)}}</td>
            <td>
                {{each item.limits limit}}
                <p>{{limit}}</p>
                {{/each}}
            </td>
        </tr>
        {{/each}}
    </table>
    {{/if}}
</script>
<script id="apiTemplate" type="text/html">
    {{each $data item i}}
    <li data-path="{{item.url}}">
        {{if item.name}}
        <h1>{{item.name}}</h1>
        {{/if}}
        <h2>
            {{item.url}}
        </h2>
        <div class="methodsBox">
            {{each item.methods method k}}
            <span>{{method}}</span>
            {{/each}}
        </div>
        <pre><code>{{@ CommentUtil.parse(item.description) || '暂无'}}</code></pre>

        <% include('paramsTemplate', {paramList: item.pathVariableList, name: 'PATH_VARIABLES' }) %>
        <% include('paramsTemplate', {paramList: item.headerList, name: 'HEADERS' }) %>
        <% include('paramsTemplate', {paramList: item.paramList, name: 'PARAMS' }) %>
        <% include('paramsTemplate', {paramList: item.bodyList, name: 'BODYS' }) %>

        <h2>响应内容</h2>
        <table class="typeTable">
            <tr>
                <th>名称</th>
                <th>类型</th>
                <th>描述</th>
                <th>限制</th>
            </tr>
            {{each item.returnList item j}}
            <tr data-depth="{{item.depth}}">
                <td class="name" style="{{'padding-left:'+(item.depth * 12 + 10)+'px;'}}">
                    {{if item.depth > 0}}
                    <div class="depth" style="{{'width:' + (item.depth * 12) + 'px;'}}"></div>
                    {{/if}}
                    {{item.name}}
                </td>
                <td class="classType" title="{{item.classInfo}}">{{item.type}}
                    <i></i></td>
                <td>{{@ CommentUtil.parse(item.comment)}}</td>
                <td>
                    {{each item.limits limit}}
                    <p>{{limit}}</p>
                    {{/each}}
                </td>
            </tr>
            {{/each}}

        </table>
        {{if item.returnComment}}
        <h2>响应描述</h2>
        <pre><code>{{@ CommentUtil.parse(item.returnComment) || '暂无'}}</code></pre>
        {{/if}}
    </li>
    {{/each}}
</script>

<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap-treeview.js"></script>
<script src="static/js/template-web.js"></script>
<script src="./restApiData.js"></script>
<script>
    // 这行是 Opera 的补丁, 少了它 Opera 是直接用跳的而且画面闪烁 by willin
    $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');

    const TreeUtil = function () {
        const parseTreeToList = function (treeObj, list, depth) {
            if (!treeObj) {
                return;
            }
            let data = Object.assign({}, treeObj);
            data.data = null;
            data.depth = depth;

            //维度
            if (data.dimension > 1) {
                for (let i = 1; i < data.dimension; i++) {
                    data.classInfo += '[]';
                }
            }

            list.push(data);
            if (treeObj.data) {
                for (let i = 0; i < treeObj.data.length; i++) {
                    parseTreeToList(treeObj.data[i], list, depth + 1);
                }
            }
        };
        return {
            parseTreeToList: function (treeObj) {
                let list = [];
                if (Array.isArray(treeObj)) {
                    treeObj.forEach(function (item) {
                        parseTreeToList(item, list, 0);
                    });
                } else {
                    parseTreeToList(treeObj, list, 0);
                }
                return list;
            }
        }
    }();

    const CommentUtil = function () {
        return {
            parse: function (comment) {
                if (!comment) return '';
                let html = '';
                if (comment.type != 'Text') {
                    if(comment.type == '@link' || comment.type == '@linkPlan'){
                       html+= '<a href="javascript: alert(\'该功能将在下一版本到来！\')">';
                    }
                    html += '{' + comment.type + ' ';
                }
                if (comment.text) {
                    html += comment.text;
                } else if (comment.inlines && comment.inlines.length > 0) {
                    comment.inlines.forEach((item) => {
                        html += this.parse(item);
                    });
                }
                if (comment.type != 'Text') {
                    html += '}';
                    if(comment.type == '@link' || comment.type == '@linkPlan'){
                        html+= '</a>';
                    }
                }
                return html;
            }
        }
    }();

    template.defaults.imports.CommentUtil = CommentUtil;

    const interfaces = Object.values(restApiData.interfaces);
    interfaces.forEach(function (interfaceItem) {
        interfaceItem.pathVariableList = TreeUtil.parseTreeToList(Object.values(interfaceItem.pathVariables));
        interfaceItem.headerList = TreeUtil.parseTreeToList(Object.values(interfaceItem.headers));
        interfaceItem.paramList = TreeUtil.parseTreeToList(Object.values(interfaceItem.params));
        interfaceItem.bodyList = TreeUtil.parseTreeToList(Object.values(interfaceItem.bodys));

        interfaceItem.returnList = TreeUtil.parseTreeToList(interfaceItem.returnBody);
    });

    console.log('接口信息', restApiData);

    $("#apiContent").html(template("apiTemplate", restApiData.interfaces));

    //尝试定位锚点
    setTimeout(function () {
        if (window.location.hash) {
            console.log('window.location.hash', window.location.hash);
            var apiLis = $('#apiContent li[data-path^="' + window.location.hash.substring(1) + '"]');
            console.log(apiLis);
            if (apiLis.length > 0) {
                $body.animate({scrollTop: $(apiLis[0]).offset().top}, 300);
            }
        }
    }, 10);


    var parseTree = function (apiArray, depth) {
        depth = depth || 3; //默认遍历到3层
        var treeMap = {};
        for (var i = 0; i < apiArray.length; i++) {
            var item = apiArray[i];
            var ss = item.url.split('/');
    console.log('ss', ss);
            var data = treeMap;
            var currentDepth = 0;
            for (var j = 0; j < ss.length; j++) {
                if (ss[j]) {
                    currentDepth++;
                    if (j == ss.length - 1 || currentDepth >= depth) {
                        data[ss.slice(j).join("/")] = null;
                        break;
                    } else {
                        if (!data[ss[j]]) {
                            data[ss[j]] = {};
                        }
                        data = data[ss[j]];
                    }

                }
            }
        }
        return treeMap;
    };


    var apiTree = parseTree(interfaces, 4);

    console.log('侧边树形层级', apiTree);

    var parseArray = function (treeMap, basePath) {
        var data = [];
        for (var key in treeMap) {
            var path = (basePath || '') + '/' + key;
            var item = {
                text: '/' + key,
                path: path
            };
            if (treeMap[key]) {
                item.nodes = parseArray(treeMap[key], path);
            }
            data.push(item);

        }
        return data;
    };

    var treeEl = $('#tree').treeview({data: parseArray(apiTree)});

    treeEl.on('nodeSelected', function (e, item) {
        var apiLis = $('#apiContent li[data-path^="' + item.path + '"]');
        if (apiLis.length > 0) {
            $body.animate({scrollTop: $(apiLis[0]).offset().top}, 300);
        }
    });


</script>
</body>
</html>